<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <title>Welcome</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
    <div class="row align-items-center">
        <div class="col-sm-4">
            <img src=${avatar} alt="pic" class="rounded-circle" style=" height: 150px;; width: 150px;">
        </div>
        <div class="col-sm-4 text-left">
            <h4>昵称： ${name}</h4>
            <h4>签名： ${description}</h4>
            <h4>状态：<c:choose>
            <c:when test="${isLook==true}"><span class="text-success"></c:when>
            <c:otherwise><span class="text-dark"></c:otherwise>
            </c:choose>${state}</span></h4>
            <h4>统计：<c:choose>
                <c:when test="${info==0}"><span ></c:when>
                    <c:when test="${info==1}"><span class="text-info"></c:when>
                        <c:when test="${info==2}"><span class="text-primary"></c:when>
                            <c:when test="${info==3}"><span class="text-warning"></c:when>
                <c:otherwise><span class="text-danger"></c:otherwise>
                </c:choose>${statistic}</span></h4>
        </div>
        <div id="time" class="col-sm-4 text-left">
            <h3>欢迎您</h3>
            <h4>00:00:00</h4>
        </div>
    </div>
</div>

<div class="container text-center table-responsive">
    <h2>历史记录</h2>
    <p id="json"></p>
    <table id="records" class="table table-hover" data-toggle="table" data-pagination="true"
           data-page-size="10" data-page-list="[10]" data-search="true"
           data-pagination-use-intermediate="true" style="display:none">
        <thead>
        <tr>
            <th>登录时间</th>
            <th>离线时间</th>
            <th>在线时长</th>
        </tr>
        </thead>
        <tbody >
        </tbody>
    </table>
</div>
<div class="container text-center">
    <div style="border-top: 1px solid #edeff2; padding: 35px 0;">
        <p style="margin: 0; line-height: 20px;">
            Copyright 2019 © SONP Watching Corporation. All rights reserved.
            <small style="display: block; padding-top: 5px;color: #8a9399; font-size: 13px;">LookingZW is a registered trademark of SONP Watching Corporation.</small>
        </p>
    </div>
</div>
</body>
<script>
    function format(sec) {
        var res = "";
        var day = parseInt(sec / (24 * 3600));
        if (day > 0) {
            res += day + '天';
        }
        var hour = parseInt((sec % (24 * 3600)) / 3600);
        if (hour > 0) {
            res += hour + "小时";
        }
        var minute = parseInt((sec % (3600) + 59) / 60);
        if (minute >= 0) {
            res += minute + "分钟";
        }
        return res;
    }

    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    $(document).ready(function () {
        setInterval(function () {
            var date = new Date();
            var time = date.Format("hh:mm:ss");
            var hi = $('#time');
            hi.find('h4').text(time);

            var hour = date.getHours();
            var say = hi.find('h3');
            if (6 < hour && hour < 11) {
                say.text("早上好！");
            }
            else if (11 <= hour && hour < 14) {
                say.text("中午好！");
            }
            else if (14 <= hour && hour < 18) {
                say.text("下午好！");
            }
            else if (18 <= hour && hour < 23) {
                say.text("晚上好！");
            }
            else {
                say.text("晚安！");
            }
        }, 1000);

        var table = $("#records");
        var tbody = table.find("tbody");
        $.getJSON("record.json", "", function (result) {
            $.each(result.data.reverse(), function (i, item) {
                var txt = "<tr><td>";
                txt += new Date(item.StartTime).Format("yyyy-MM-dd hh:mm:ss") + "</td><td>";
                txt += new Date(item.EndTime).Format("yyyy-MM-dd hh:mm:ss") + "</td><td>";
                txt += format((item.EndTime - item.StartTime) / 1000) + "</td></tr>";
                tbody.append(txt);
            })
            $.getScript("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.js",function(){
                table.show();
            });

        });

    });
</script>
</html>